<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../../public/maincss.js"></script>

</head>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .i_vue_rr_popper {
            width: 300px
        }
        .el-upload__input{display: none !important;}
        .form-width-inp{width:  186px !important;}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" id="main-block">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <el-button type="primary" style="margin-bottom: 11px;" @click="addBanner">添加轮播图</el-button>
                    <div style="overflow:visible;position:relative;text-align: center;">
                        <el-table
                            ref="multipleTable"
                            :data="uploadBarList"
                            tooltip-effect="dark"
                            style="width: 100%"
                            border>
                            <el-table-column
                                    prop="hrefs"
                                    width="400"
                                    label="链接地址">
                            </el-table-column>
                            <el-table-column
                                    prop="url"
                                    label="轮播图片">
                                <template slot-scope="scope">
                                    <a :href="scope.row.url" target="_blank">
                                      <img :src="scope.row.url" style="width: 350px;">
                                    </a>
                                </template>
                            </el-table-column>
                            <el-table-column
                                width="260"
                                label="操作">
                                <template scope="scope">
                                    <el-button type="primary" icon="el-icon-edit" @click="editBanner(scope.row)"  plain>修改</el-button>
                                    <el-button  type="danger" icon="el-icon-delete" @click="deleteBanner(scope.row)" plain>删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

<!-- 
                        <el-form :model="addParamData"  label-width="110px"  :inline="true" ref="ruleForm">
                            <table class="table table-striped table-bordered table-hover " id="editable">
                                <caption class="text-left" style="padding-left:10px;background-color:#f3f3f2;">网站基本配置
                                  <span style="display: inline-block;color: red;">（注：图片分辨率大小需为1920*500）</span>
                                </caption>
                                
                                <tbody>
                                    <tr>
                                        <th class="text-right" style="width: 120px;text-align: center;">轮播图:</th>
                                        <td colspan="3" class="text-left">
                                            <el-form-item label="" >
                                                <el-upload
                                                      action="/upload.do"
                                                      list-type="picture-card"
                                                      :on-preview="handlePictureCardPreview"
                                                      :on-success="uploadSuccessDeal"
                                                      :file-list="uploadBarList"
                                                      :accept="fileType"
                                                      :on-remove="handleRemove">
                                                      <i class="el-icon-plus"></i>
                                                </el-upload>
                                                <el-dialog :visible.sync="dialogVisible">
                                                    <img width="100%" :src="dialogImageUrl" alt="">
                                                </el-dialog>
                                            </el-form-item>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <el-button @click="uptDicParam" type="primary" v-if="type=='default'">保存系统配置</el-button>
                        </el-form> -->

                    </div>
                    <div class="conbut">
                    </div>
                </div>
            </div>
        </div>
    </div>

      <el-dialog title="轮播图上传" :visible.sync="isShow" width="600px">
        <el-form :model="bannerData" ref="certForm">
            <el-form-item label="链接地址：" :label-width="formLabelWidth">
                <el-input v-model="bannerData.hrefs" prop="hrefs" autocomplete="off" style="width: 380px;"></el-input>
            </el-form-item>
            <el-form-item label="轮播图片:" :label-width="formLabelWidth">
                <el-upload
                        ref="uploader"
                        class="upload-demo"
                        drag
                        action="/upload.do"
                        :on-remove="handleRemove"
                        :data="uploadDataDeal"
                        :on-success="uploadSuccessDeal"
                        :limit="uploadLimit"
                        style="width: 380px;">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">重新上传时，需先将下方图片删除否，否则无法再上传图片</div>
                </el-upload>
                <a  v-if="bannerData.url != ''" :href="bannerData.url" target="_blank" >
                    <img :src="bannerData.url"  style="max-width: 400px;"/>
                </a>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeUpload()">取 消</el-button>
            <el-button type="primary" @click="saveBanner()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="../../public/main.js"></script>
<script src="../../../public/js/upload.js"></script>
<script src="navscrollbar.js"></script>

</html>
